<template>
  <el-table v-loading="loading" :data="bannerList" style="width: 100%">
    <el-table-column prop="alt" label="描述" width="180" />
    <el-table-column label="图片" width="180">
      <template #default="scope">
        <img :src="scope.row.img" alt="" style="width: 100px; height: 100px" />
      </template>
    </el-table-column>
    <el-table-column prop="link" label="说明" />
    <el-table-column label="操作" width="120">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getBannerList, bannerDelete } from "@/api/api";
export default {
  data() {
    return {
      bannerList: [],
      loading: false,
    };
  },
  created() {
    this.initBannerList();
  },
  methods: {
    async initBannerList() {
      this.loading = true;
      const res = await getBannerList();
      this.bannerList = res.data;
      this.loading = false;
    },
    async handleDelete(index, row) {
      const res = await bannerDelete(row.bannerid);
      this.$message.success(res.message);
      this.initBannerList();
    },
  },
};
</script>

<style></style>
